<template>
  <f7-page>
    <f7-navbar title="文本" back-link></f7-navbar>

      <div class="tien-bar bg-white border-bottom ">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>文字大小
        </div>
      </div>


      <div class='bg-white padding-lr'>
        <div class='borders-bottom padding-xs flex align-center'>
          <div class='padding'>60</div>
          <div class='flex-1 text-center'>
            <div class='border-bottom text-xsl padding'>
              <span class=' tien-icon-roundcheckfill text-green'></span>
            </div>
            <div class='padding'>用于图标、数字等特大显示</div>
          </div>
        </div>
        <div class='borders-bottom padding-xs flex align-center'>
          <div class='padding'>40</div>
          <div class='flex-1 text-center'>
            <div class='border-bottom text-sl padding'>
              <span class=' tien-icon-roundcheckfill text-green'></span>
            </div>
            <div class='padding'>用于图标、数字等较大显示</div>
          </div>
        </div>
        <div class='borders-bottom padding-xs flex align-center'>
          <div class='padding'>22</div>
          <div class='flex-sub text-center'>
            <div class='border-bottom text-xxl padding'>
              <span class='text-price text-red'>80.00</span>
            </div>
            <div class='padding'>用于金额数字等信息</div>
          </div>
        </div>
        <div class='borders-bottom padding-xs flex align-center'>
          <div class='padding'>18</div>
          <div class='flex-sub text-center'>
            <div class='border-bottom text-xl padding'>
              <span class='text-black text-bold'>您的订单已提交成功！</span>
            </div>
            <div class='padding'>页面大标题，用于结果页等单一信息页</div>
          </div>
        </div>
        <div class='borders-bottom padding-xs flex align-center'>
          <div class='padding'>16</div>
          <div class='flex-sub text-center'>
            <div class='border-bottom text-lg padding'>
              <span class='text-black'>ColorUI组件库</span>
            </div>
            <div class='padding'>页面小标题，首要层级显示内容</div>
          </div>
        </div>
        <div class='borders-bottom padding-xs flex align-center'>
          <div class='padding'>14</div>
          <div class='flex-sub text-center'>
            <div class='border-bottom text-df padding'>专注视觉的小程序组件库</div>
            <div class='padding'>页面默认字号，用于摘要或阅读文本</div>
          </div>
        </div>
        <div class='borders-bottom padding-xs flex align-center'>
          <div class='padding'>12</div>
          <div class='flex-sub text-center'>
            <div class='border-bottom text-sm padding'>
              <span class='text-grey'>衬衫的价格是9磅15便士</span>
            </div>
            <div class='padding'>页面辅助信息，次级内容等</div>
          </div>
        </div>
        <div class='padding-xs flex align-center'>
          <div class='padding'>10</div>
          <div class='flex-sub text-center'>
            <div class='border-bottom text-xs padding'>
              <span class='text-gray'>我于杀戮之中绽放 亦如黎明中的花朵</span>
            </div>
            <div class='padding'>说明文本，标签文字等关注度低的文字</div>
          </div>
        </div>
      </div>
      <div class="tien-bar bg-white border-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>文字颜色
        </div>
      </div>
      <div class='grid col-5 padding-sm bg-white'>
        <div class='padding-sm tien-col' v-for="(item,idx) in list">
          <div :class="'text-center text-'+item.name ">
            {{item.title}}
          </div>
        </div>
      </div>
      <div class="tien-bar bg-white border-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>文字截断
        </div>
      </div>
      <div class='padding bg-white'>
        <div class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</div>
      </div>
      <div class="tien-bar bg-white border-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>文字对齐
        </div>
      </div>
      <div class='padding bg-white'>
        <div class='text-left padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</div>
        <div class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</div>
        <div class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</div>
      </div>
      <div class="tien-bar bg-white border-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>特殊文字
        </div>
      </div>
      <div class='padding text-center'>
        <div class='padding-lr bg-white'>
          <div class='border-bottom padding'>
          <span class='text-price'>80.00</span>
          </div>
          <div class='padding'>价格文本，利用伪元素添加"¥"符号</div>
        </div>
        <div class='padding-lr bg-white margin-top'>
          <div class='border-bottom padding'>
          <span class='text-Abc'>color Ui</span>
          </div>
          <div class='padding'>英文单词首字母大写</div>
        </div>
        <div class='padding-lr bg-white margin-top'>
          <div class='border-bottom padding'>
          <span class='text-ABC'>color Ui</span>
          </div>
          <div class='padding'>全部字母大写</div>
        </div>
        <div class='padding-lr bg-white margin-top'>
          <div class='border-bottom padding'>
          <span class='text-abc'>color Ui</span>
          </div>
          <div class='padding'>全部字母小写</div>
        </div>
      </div>

      
  </f7-page>
</template>

<script>
export default {
  name:'layout',
  data() {
    return {
      list: [{
        title: '嫣红',
        name: 'red',
        color: '#e54d42'
      },
      {
        title: '桔橙',
        name: 'orange',
        color: '#f37b1d'
      },
      {
        title: '明黄',
        name: 'yellow',
        color: '#fbbd08'
      },
      {
        title: '橄榄',
        name: 'olive',
        color: '#8dc63f'
      },
      {
        title: '森绿',
        name: 'green',
        color: '#39b54a'
      },
      {
        title: '天青',
        name: 'cyan',
        color: '#1cbbb4'
      },
      {
        title: '海蓝',
        name: 'blue',
        color: '#0081ff'
      },
      {
        title: '姹紫',
        name: 'purple',
        color: '#6739b6'
      },
      {
        title: '木槿',
        name: 'mauve',
        color: '#9c26b0'
      },
      {
        title: '桃粉',
        name: 'pink',
        color: '#e03997'
      },
      {
        title: '棕褐',
        name: 'brown',
        color: '#a5673f'
      },
      {
        title: '玄灰',
        name: 'grey',
        color: '#8799a3'
      },
      {
        title: '草灰',
        name: 'gray',
        color: '#aaaaaa'
      },
      {
        title: '墨黑',
        name: 'black',
        color: '#333333'
      },
      {
        title: '雅白',
        name: 'white',
        color: '#ffffff'
      },]
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

